<template>
  <div class="chest-pain">
    <div id="topInfo">
      <div class="title_gailan_middle">
        <div class="title_gailan_top">
          <span>今日工作量</span>
          <el-progress
            class="percentage"
            :percentage="statistiForm.ratioCpFollowUpToday"
            color="#48A8FF"
            define-back-color="#FFBBA4"
            :stroke-width="10"
          ></el-progress>
        </div>
        <div class="fontWhite">
          <div class="title_gailan_radio jrsf">
            <span class="title_gailan_left_middle">
              <span class="font13">今日应随访</span>
            </span>
            <span class="title_gailan_line">|</span>
            <span class="title_gailan_right_middle">
              <span id="wlyy_jrsf">{{
                statistiForm.cntCpFollowUpDuringToday
              }}</span>
              <span class="title_gailan_right_middle_span font13"
                >（人次）</span
              >
            </span>
          </div>
          <div class="title_gailan_radio jrysf">
            <span class="title_gailan_left_middle">
              <span class="font13">今日已随访</span>
            </span>
            <span class="title_gailan_line">|</span>
            <span class="title_gailan_right_middle">
              <span id="wlyy_jrysf">{{
                statistiForm.cntCpFollowUpUploadToday
              }}</span>
              <span class="title_gailan_right_middle_span font13"
                >（人次）</span
              >
            </span>
          </div>
        </div>
      </div>
      <div class="title_gailan_middle">
        <div class="title_gailan_top">
          <span>本月工作量</span>
          <el-progress
            class="percentage"
            :percentage="statistiForm.ratioCpFollowUpThisMonth"
            color="#48A8FF"
            define-back-color="#FFBBA4"
            :stroke-width="10"
          ></el-progress>
        </div>
        <div class="fontWhite">
          <div class="title_gailan_radio jrsf">
            <span class="title_gailan_left_middle">
              <span class="font13">本月应随访</span>
            </span>
            <span class="title_gailan_line">|</span>
            <span class="title_gailan_right_middle">
              <span id="scmz_jrsf">{{
                statistiForm.cntCpFollowUpDuringThisMonth
              }}</span>
              <span class="title_gailan_right_middle_span font13"
                >（人次）</span
              >
            </span>
          </div>
          <div class="title_gailan_radio jrysf">
            <span class="title_gailan_left_middle">
              <span class="font13">本月已随访</span>
            </span>
            <span class="title_gailan_line">|</span>
            <span class="title_gailan_right_middle">
              <span id="scmz_jrysf">{{
                statistiForm.cntCpFollowUpUploadThisMonth
              }}</span>
              <span class="title_gailan_right_middle_span font13"
                >（人次）</span
              >
            </span>
          </div>
        </div>
      </div>
      <div class="title_gailan_middle">
        <div class="title_gailan_top">
          <span>本年工作量</span>
          <el-progress
            class="percentage"
            :percentage="statistiForm.ratioCpFollowUpThisYear"
            color="#48A8FF"
            define-back-color="#FFBBA4"
            :stroke-width="10"
          ></el-progress>
        </div>
        <div class="fontWhite">
          <div class="title_gailan_radio jrsf">
            <span class="title_gailan_left_middle">
              <span class="font13">本年应随访</span>
            </span>
            <span class="title_gailan_line">|</span>
            <span class="title_gailan_right_middle">
              <span id="sh_jrsf">{{
                statistiForm.cntCpFollowUpDuringThisYear
              }}</span>
              <span class="title_gailan_right_middle_span font13"
                >（人次）</span
              >
            </span>
          </div>
          <div class="title_gailan_radio jrysf">
            <span class="title_gailan_left_middle">
              <span class="font13">本年已随访</span>
            </span>
            <span class="title_gailan_line">|</span>
            <span class="title_gailan_right_middle">
              <span id="sh_jrysf">{{
                statistiForm.cntCpFollowUpUplaodThisYear
              }}</span>
              <span class="title_gailan_right_middle_span font13"
                >（人次）</span
              >
            </span>
          </div>
        </div>
      </div>
    </div>
    <div id="btmForm">
      <el-form :inline="true" class="demo-form-inline" label-width="80px">
        <el-form-item label="患者编号 :">
          <el-input
            v-model="formInline.dispatchId"
            placeholder="请输入患者编号"
          />
        </el-form-item>
        <el-form-item label="住院ID :">
          <el-input
            v-model="formInline.inpatientId"
            placeholder="请输入住院ID"
          />
        </el-form-item>
        <el-form-item label="姓名 :">
          <el-input v-model="formInline.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="出院诊断 :">
          <el-select v-model="formInline.outcomeDiagnosisCode" clearable>
            <el-option
              v-for="item in leaveHospitaloptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="随访科室 :">
          <el-select
            v-model="formInline.followUpDept"
            clearable
            @change="onChangeDeptfollow"
          >
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="随访人 :">
          <el-select v-model="formInline.followUpDoctor" clearable>
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="出院日期 :">
          <el-date-picker
            v-model="timeDate"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="onChangeDate"
          />
        </el-form-item>

        <el-form-item
          ><el-button type="primary" @click="query()"
            >查询</el-button
          ></el-form-item
        >
        <el-form-item
          ><el-button type="primary" @click="reset()"
            >重置</el-button
          ></el-form-item
        >
      </el-form>
    </div>
    <el-tabs
      v-model="activeName"
      type="border-card"
      style="margin: 0 20px"
      @tab-click="onChagneTabs"
    >
      <el-tab-pane label="全部" name="all" />
      <el-tab-pane label="待指派" name="0" />
      <el-tab-pane label="随访中" name="1" />
      <el-tab-pane label="已上报" name="2" />
      <el-tab-pane label="已过期" name="3" />
      <el-tab-pane
        v-if="['3', '4', '10'].includes(activeName)"
        label="所有已过期"
        name="10"
      />
      <el-tab-pane
        v-if="['3', '4', '10'].includes(activeName)"
        label="已过期，可编辑"
        name="4"
      />
      <el-tab-pane
        v-if="['1', '5', '6'].includes(activeName)"
        label="所有随访中"
        name="1"
      />
      <el-tab-pane
        v-if="['1', '5', '6'].includes(activeName)"
        label="近7天需随访"
        name="5"
      />
      <el-tab-pane
        v-if="['1', '5', '6'].includes(activeName)"
        label="近7天即将到期"
        name="6"
      />
      <div class="btn" v-if="!['5', '2'].includes(activeName)">
        <el-button
          type="primary"
          :disabled="!selectList.length"
          @click="onBatchAssignment"
          >批量指派</el-button
        >
      </div>
      <el-table
        :data="dataList"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" width="50" label="序号" align="center" />
        <el-table-column prop="dispatchId" label="患者编号" align="center" />
        <el-table-column prop="inpatientId" label="住院ID" align="center" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="sex" label="性别" align="center" />
        <el-table-column prop="age" label="年龄" align="center" />
        <el-table-column
          prop="outcome_diagnosis_code"
          label="出院诊断"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{
              getName(
                scope.row.outcome_diagnosis_code,
                leaveHospitaloptions,
                "label",
                "value"
              )
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="outcome_date"
          label="出院日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="outcome_diagnosis_code"
          label="本期随访有效期"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <span
              >{{ scope.row.this_follow_up_date_start }}至{{
                scope.row.this_follow_up_date_end
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="assign_follow_up_dept"
          label="指派科室"
          align="center"
        />
        <el-table-column
          prop="assign_follow_up_doctor"
          label="指派医生"
          align="center"
        />
        <el-table-column
          prop="follow_up_status"
          label="随访状态"
          align="center"
          width="220"
        >
          <template slot-scope="scope">
            <div class="follow_up_status">
              <div class="item" v-if="scope.row.follow_up_status1 != 7">
                <div
                  class="month"
                  :class="{
                    nostart: scope.row.follow_up_status1 == 0,
                    followup: scope.row.follow_up_status1 == 1,
                    submit: ['2', '5'].includes(scope.row.follow_up_status1),
                    expired: ['3', '4'].includes(scope.row.follow_up_status1),
                  }"
                >
                  1月
                </div>
                <div class="followstatus">
                  {{
                    getName(
                      scope.row.follow_up_status1,
                      statusList,
                      "label",
                      "value"
                    )
                  }}
                </div>
              </div>
              <div class="line" v-if="scope.row.follow_up_status3 != 7">-</div>
              <div class="item" v-if="scope.row.follow_up_status3 != 7">
                <div
                  class="month"
                  :class="{
                    nostart: scope.row.follow_up_status3 == 0,
                    followup: scope.row.follow_up_status3 == 1,
                    submit: ['2', '5'].includes(scope.row.follow_up_status3),
                    expired: ['3', '4'].includes(scope.row.follow_up_status3),
                  }"
                >
                  3月
                </div>
                <div class="followstatus">
                  {{
                    getName(
                      scope.row.follow_up_status3,
                      statusList,
                      "label",
                      "value"
                    )
                  }}
                </div>
              </div>
              <div class="line" v-if="scope.row.follow_up_status6 != 7">-</div>
              <div class="item" v-if="scope.row.follow_up_status6 != 7">
                <div
                  class="month"
                  :class="{
                    nostart: scope.row.follow_up_status6 == 0,
                    followup: scope.row.follow_up_status6 == 1,
                    submit: ['2', '5'].includes(scope.row.follow_up_status6),
                    expired: ['3', '4'].includes(scope.row.follow_up_status6),
                  }"
                >
                  6月
                </div>
                <div class="followstatus">
                  {{
                    getName(
                      scope.row.follow_up_status6,
                      statusList,
                      "label",
                      "value"
                    )
                  }}
                </div>
              </div>
              <div class="line" v-if="scope.row.follow_up_status12 != 7">-</div>
              <div class="item" v-if="scope.row.follow_up_status12 != 7">
                <div
                  class="month"
                  :class="{
                    nostart: scope.row.follow_up_status12 == 0,
                    followup: scope.row.follow_up_status12 == 1,
                    submit: ['2', '5'].includes(scope.row.follow_up_status12),
                    expired: ['3', '4'].includes(scope.row.follow_up_status12),
                  }"
                >
                  12月
                </div>
                <div class="followstatus">
                  {{
                    getName(
                      scope.row.follow_up_status12,
                      statusList,
                      "label",
                      "value"
                    )
                  }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="activeName != 0"
          prop="follow_up_dept"
          label="随访科室"
          align="center"
        />
        <el-table-column
          v-if="activeName != 0"
          prop="follow_up_doctor"
          label="随访人"
          align="center"
        />
        <el-table-column
          v-if="!['0', '2'].includes(activeName)"
          prop="overdue_status"
          label="过期状态"
          align="center"
        />
        <el-table-column
          label="操作"
          width="240px"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <el-button type="text" @click="onMedicalRecords(scope.row)"
                >查看医疗病历</el-button
              >
            </div>
            <div>
              <el-button type="text" @click="onCancelFollowUp(scope.row)"
                >取消随访</el-button
              >
              <el-button
                type="text"
                @click.native.stop="onFollowUp(scope.row, 0)"
                >立即随访</el-button
              >
            </div>
            <div>
              <el-button
                type="text"
                :disabled="
                  !['2', '3', '4', '5'].includes(scope.row.follow_up_status12)
                "
                @click.native.stop="onFollowUp(scope.row, 1)"
                >新增一年后随访</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="formInline.pageNo"
        :page-size="formInline.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total,prev, pager, next,sizes"
        :total="total"
        @size-change="changeSize"
        @current-change="changePage"
      />
    </el-tabs>
    <el-dialog
      title="批量指派"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      destroy-on-close
    >
      <el-form
        :model="designateForm"
        :rules="rules"
        ref="designateForm"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item label="随访科室" prop="deptId">
          <el-select
            style="width: 100%"
            v-model="designateForm.deptId"
            clearable
            @change="onChangeDept"
          >
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="随访医生" prop="doctorId">
          <el-select
            style="width: 100%"
            v-model="designateForm.doctorId"
            clearable
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitBatchAssignment"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDeptList,
  getDeptUserList,
  getCpFollowUpPatientList,
  cancelCpFollowt,
  getCpFollowUpStatisticData,
  addCpFollowUpAfterYear,
  BatchAssignment,
} from "@/api/follow-up/chest-pain";
export default {
  data() {
    return {
      formInline: {
        startOutcomeDate: "",
        endOutcomeDate: "",
        pageNo: 1,
        pageSize: 10,
      },
      statistiForm: {
        ratioCpFollowUpToday: 0,
        ratioCpFollowUpThisMonth: 0,
        ratioCpFollowUpThisYear: 0,
      },
      designateForm: {},
      timeDate: [],
      dataList: [],
      tableData: [],
      activeName: "all",
      selectList: [],
      dialogVisible: false,
      leaveHospitaloptions: [
        {
          label: "STEMI",
          value: 1,
        },
        {
          label: "NSTEMI",
          value: 2,
        },
        {
          label: "UA",
          value: 3,
        },
      ],
      // 本期随访状态 0：未到随访期 1 近7天需随访 2 正常随访中 3 近7天即将到期 4 已提交 5 已过期可编辑 6 已过期不可编辑 7 已死亡随访终止 8 1年后随访未开始
      statusList: [
        {
          label: "未开始",
          value: 0,
        },
        {
          label: "随访中",
          value: 1,
        },
        {
          label: "已提交",
          value: 2,
        },
        {
          label: "已过期",
          value: 3,
        },
        {
          label: "已过期",
          value: 4,
        },
        {
          label: "已提交",
          value: 5,
        },
      ],
      userList: [],
      deptList: [],
      total: 0,
      rules: {
        deptId: {
          required: true,
          message: "必填项不能为空",
          trigger: "change",
        },
        doctorId: {
          required: true,
          message: "必填项不能为空",
          trigger: "change",
        },
      },
    };
  },
  created() {
    const dispatchId = this.$route.query?.dispatchId || "";
    if (dispatchId) this.formInline.dispatchId = dispatchId;
  },
  mounted() {
    this.geStatisticData();
    this.getDeptList();
    this.getDataList();
  },
  methods: {
    // 获取科室列表
    async geStatisticData() {
      const result = await getCpFollowUpStatisticData();
      this.statistiForm = result?.data;
    },
    // 获取科室列表
    async getDeptList() {
      const result = await getDeptList();
      this.deptList = result?.data?.deptList || [];
    },
    // 获取科室人员
    async getDeptUserList(departmentName) {
      const result = await getDeptUserList({ departmentName });
      this.userList = result?.data?.deptUserList || [];
    },
    async getDataList() {
      const result = await getCpFollowUpPatientList({
        ...this.formInline,
      });
      this.dataList = result?.data?.cpFollowUpPatientList;
      this.total = result?.data?.total;
    },
    getName(value, list, labelName, valueName) {
      // if (value == 7) return "";
      return list.find((item) => item[valueName] == value)[labelName];
    },
    goBack() {
      this.$router.push({
        path: "follow-up-details",
        query: {
          activeName: "third1", //查询表单名
          patId: this.patId,
          planId: this.planId,
          memPatTypeCodes: this.memPatTypeCodes,
        },
      });
    },
    // 重置
    reset() {
      Object.keys(this.formInline).forEach((key) => {
        if (["pageNo", "pageSize"].includes(key)) return;
        this.formInline[key] = "";
      });
      this.timeDate = [];
      this.query();
    },
    query() {
      this.formInline.pageNo = 1;
      this.getDataList();
    },
    onChagneTabs({ name }) {
      let status = "";
      switch (name) {
        case "all":
          status = "";
          break;
        case "10":
          status = "3";
          break;
        default:
          status = name;
          break;
      }
      this.formInline.followUpStatus = status;
      this.query();
    },
    onBatchAssignment() {
      this.dialogVisible = true;
    },
    onSubmitBatchAssignment() {
      this.$refs.designateForm.validate(async (valid) => {
        if (!valid) return;
        const dispatchIds = this.selectList.map((item) => item.dispatchId);
        await BatchAssignment({
          dispatchIds,
          ...this.designateForm,
        });
        this.query();
        this.dialogVisible = false;
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    onMedicalRecords(row) {
      row.isFollow = true;
      row.diseaseType = "胸痛";
      const rowStr = JSON.stringify(row);
      this.$router.push({
        name: "patientsList",
        params: {
          rowStr: rowStr,
        },
      });
      // this.$router.push({
      //   path: "/green-channel/patients-list",
      // });
      // console.log(row, 'row')
      // this.$eventBus.$emit("onMedicalRecords", row, false);
    },
    onCancelFollowUp(row) {
      this.$confirm("已有的随访数据会被清空，确认撤销随访？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await cancelCpFollowt(row.dispatchId);
        this.$message({
          type: "success",
          message: "撤销成功!",
        });
        this.getDataList();
      });
    },
    async onFollowUp(row, type) {
      if (type) {
        // 新增1年后随访
        const formData = new FormData();
        formData.append("dispatchId", row.dispatchId);
        const result = await addCpFollowUpAfterYear(formData);
        console.log(result);
        if (result.code == 500) {
          return this.$message({
            type: "warning",
            message: "时间未到达一年，不能进行一年后随访!",
          });
        }
      }
      this.$router.push({
        path: "/follow-up-list/follow-up-details",
        query: {
          dispatchId: row.dispatchId,
        },
      });
    },
    onChangeDept(id) {
      this.$set(this.designateForm, "doctorId", "");
      if (!id) {
        this.userList = [];
        return;
      }
      const departmentName =
        this.deptList.find((item) => item.id == id).name || "";
      this.getDeptUserList(departmentName);
    },
    onChangeDeptfollow(id) {
      this.$set(this.formInline, "followUpDoctor", "");
      if (!id) {
        this.userList = [];
        return;
      }
      const departmentName =
        this.deptList.find((item) => item.id == id).name || "";
      this.getDeptUserList(departmentName);
    },
    changeSize(e) {
      this.formInline.pageSize = e;
      this.getDataList();
    },
    changePage(e) {
      this.formInline.pageNo = e;
      this.getDataList();
    },
    onChangeDate(date) {
      if (date) {
        this.formInline.startOutcomeDate = date[0];
        this.formInline.endOutcomeDate = date[1];
      } else {
        this.formInline.startOutcomeDate = "";
        this.formInline.endOutcomeDate = "";
      }
    },
    handleSelectionChange(list) {
      this.selectList = list;
    },
  },
};
</script>

<style scoped lang='scss'>
.follow_up_status {
  display: flex;
  .item {
    .month {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #dcdcdc;
    }
    .followstatus {
      width: 45px;
      text-align: center;
    }
    .nostart {
      background: #fff;
    }
    .followup {
      background: #c94543;
      color: #fff;
    }
    .submit {
      background: #c9ebcf;
    }
    .expired {
      background: #ccc;
    }
  }
  .line {
    height: 45px;
    line-height: 45px;
  }
}

.btn {
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
}
.icon {
  font-size: 24px;
}
.font13 {
  font-size: 13px;
}
#topInfo {
  width: 100%;
  padding: 15px 20px;
  border-bottom: 10px #eee solid;
  display: flex;
  justify-content: space-between;
}
#btmForm {
  padding: 20px 20px 0;
}
.fontWhite {
  color: #fff;
}
.title_gailan_middle {
  width: 33%;
  height: 120px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  display: inline-block;
  position: relative;
}
.title_gailan_top {
  margin-top: 18px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  display: flex;
  .percentage {
    flex: 1;
    margin-left: 20px;
  }
}
.title_gailan_radio {
  width: 46%;
  height: 70px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: inline-block;
  line-height: 75px;
  position: absolute;
  bottom: 0;
  font-size: 12px;
}
.jrsf {
  /* file:///D:/svnTest/code/trunk/yzy_web_vue/src/images/follow_images/sfjl2.png */
  background: url("~@/images/follow_images/sfjl1.png") no-repeat;
  filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  /* background-size: cover; */
  /* margin: 0 3%; */
  left: 3%;
}
.jrysf {
  /* float: right; */
  /* margin-right: 20px; */
  background: url("~@/images/follow_images/sfjl2.png") no-repeat;
  filter: "progid:DXImageTransform.Microsoft.AlphaIma geLoader(sizingMethod='scale')";
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  right: 3%;
}
.title_gailan_left_middle {
  /* float: left; */
  /* position: relative; */
  /* left: 15px; */
  margin-left: 5%;
  font-size: 15px;
  line-height: 70px;
  margin-left: 5%;
}
.title_gailan_right_middle {
  position: absolute;
  right: 0px;
  font-weight: 300;
  font-size: 20px;
}
.title_gailan_line {
  font-size: 18px;
  position: absolute;
  left: 60%;
  top: -2px;
}
</style>
